<template>
	<view class="fu-p-30">
		<!-- #ifndef MP-ALIPAY -->
		<fu-nav-bar :border="false" fixed></fu-nav-bar>
		<!-- #endif -->
		
		<view class="head-box fu-flex fu-flex-direction-column fu-flex-column-center fu-text-c">
			<view class="head-box__logo">
				<fu-image width="100%" height="100%" :src="$mAssetsPath.appLogo"></fu-image>
			</view>
			<fu-text :text="$mConstDataConfig.appName" bold align="center" margin="10px 0"></fu-text>
			<fu-text :text="$mConstDataConfig.appDesc" size="12" align="center"></fu-text>
		</view>
		
		<fu-collapse accordion>
			<fu-collapse-item :title="item.title || ''" :name="`collapse-${index}`" padding="0 30rpx 0 0" :thumb="item.icon" v-for="(item, index) in basicsList" :key="index">
				<view class="fu-p-l-60 fu-flex fu-flex-column-center fu-h-96" v-for="(item2,index2) in item.columns" :key="index2" @click="$openPage({name: item2.url})">
					<view class="fu-flex-1">{{item2.name}}</view>
					<view class="fu-flex-shrink">
						<fu-icons name="right" size="13" color="#bbb"></fu-icons>
					</view>
				</view>
			</fu-collapse-item>
		</fu-collapse>
	</view>
</template>

<script setup>
	import { getCurrentInstance, ref } from 'vue';

	// data数据
	const { $mAssetsPath, $mConstDataConfig, $openPage } = getCurrentInstance().appContext.config.globalProperties;
	const basicsList = $mConstDataConfig.basicsList;
	const popupRef = ref();
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
	
	.head-box {
		padding: 24px;
		
		&__logo {
			width: 64px;
			height: 64px;
			background-color: $bg-color-2979ff;
			border-radius: 10px;
			margin: auto;
		}
	}
	
	.custom-collapse {
		
		:deep(.fu-collapse-item__title-img) {
			width: 32px;
			height: 32px;
		}
		
		:deep(.fu-collapse-item__title-arrow) {
			margin-right: 0;
		}
		
		:deep(.fu-collapse-item__title-box) {
			height: 60px;
		}
	}
</style>